<style type="text/css">
	.dishContainer {
		height: 100%;
		min-height: 505px;
	}
	
	.navbox {
		position: relative;
		float: left;
	}
	
	#siderBar {
		padding-left: 35px;
		top: -10px;
	}
	
	#siderBar ul.nav {
		list-style: none;
		display: block;
		position: relative;
		/*top: 100px;
		left: 100px;*/
		padding: 0;
		background: url(/assets/theme/cake/images/shad2.png) no-repeat;
		-webkit-background-size: 50% 100%;
	}
	
	#siderBar li {
		margin: 5px 0 0 0;
		font-size: 12px;
	}
	
	#siderBar ul.nav li a {
		-webkit-transition: all 0.3s ease-out;
		background: #5D4B33 url(/assets/theme/cake/images/border.png) no-repeat;
		color: #FFFFFF;
		padding: 7px 15px 7px 15px;
		-webkit-border-top-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		width: 115px;
		display: block;
		text-decoration: none;
		-webkit-box-shadow: 2px 2px 4px #888;
	}
	
	#siderBar ul.nav li a:hover {
		background: #F07818 url(/assets/theme/cake/images/border.png) no-repeat;
		color: #FFFFFF;
		padding: 7px 15px 7px 30px;
	}
	
	.zIndex {
		z-index: 999;
	}
	
	.ribbon {
		height: 50px;
		padding-right: 40px;
		display: inline-block;
		background: url(/assets/theme/cake/images/ribbons.png) right -55px no-repeat;
	}
	
	.ribbon span {
		display: block;
		height: 50px;
		line-height: 38px;
		padding-left: 55px;
		background: url(/assets/theme/cake/images/ribbons.png) left 0 no-repeat;
		font-size: 13px;
		text-transform: uppercase;
		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
		color: #fff;
		white-space: nowrap;
	}
	
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 144dpi) {
		.ribbon,
		.ribbon span {
			background-image: url(images/ribbons-x2.png);
			background-size: 900px auto;
		}
	}
	
	.ribbon-orange {
		background-position: right -165px;
	}
	
	.ribbon-orange span {
		background-position: left -110px;
	}
	
	.ribbon-purple {
		background-position: right -275px;
	}
	
	.ribbon-purple span {
		background-position: left -220px;
	}
	
	.ribbon.style2 {
		height: 64px;
		background-position: right -396px;
	}
	
	.ribbon.style2 span {
		height: 64px;
		line-height: 48px;
		padding-left: 65px;
		background-position: left -330px;
	}
	.ribbon a,a:hover,a:visited,a:active {
		text-decoration: none;
		text-underline: inherit;
		color: #FFFFFF;
	}
</style>
<div class="row dishContainer">
	<div class="col-sm-2 zIndex">
		<div class="ribbon ribbon-orange"><span><a data-toggle="collapse" href="#siderBar">Catalog</a></span></div>
		<div id="siderBar" class="navbox">
			<ul class="nav" data-bind="foreach:dishCatalog">
				<li>
					<a data-bind="text:catalogName,attr:{href:catalogUri}"></a>
				</li>
			</ul>
		</div>
		<div style="clear:both">
		</div>
	</div>
	<div class="col-sm-10 col-xs-12">
		<div data-bind="module:dishModuleOpts"></div>
	</div>
</div>